<template>
  <el-page-header @back="router.go(-1)" title="返回">
    <template #content>
      <span>{{projectForm.id ? '编辑':'添加'}}项目</span>
    </template>
  </el-page-header>
     
  <div class="content">
    <el-form ref="projectFormRef" :model="projectForm" :rules="projectFormRule" :inline="false" label-width="160px">

      <el-form-item label="名称" prop="name">
        <el-input v-model="projectForm.name" placeholder="请输入名称" maxlength="20"/>
      </el-form-item>


      <el-form-item label="学校" prop="school_id">
        <el-select v-model="projectForm.school_id" placeholder="请选择学校" style="width: 240px">
          <el-option
            v-for="item in schoolList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select> 
      </el-form-item>

      
      <el-form-item label="课程" prop="course_id"> 
        <el-select v-model="projectForm.course_id" placeholder="请选择课程" style="width: 240px">
          <el-option
            v-for="item in courseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select> 
      </el-form-item>
 
 
      <el-form-item label="总价" prop="amount">
        <el-input v-model="projectForm.amount" placeholder="请输入项目总价" maxlength="20"/>
      </el-form-item>

       

      <el-form-item label="时间">
        <el-date-picker
        v-model="projectForm.startEndDate"
        type="daterange"
        value-format="YYYY-MM-DD"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
       
      </el-form-item>

      <el-form-item>
        <el-button @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleCancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

import {saveProject,findById} from "@/api/project"


import {getCourseList} from "@/api/course"
import {getSchoolList} from "@/api/school"
    

const router = useRouter();
const route = useRoute();
  

const courseList = reactive([]);
const schoolList = reactive([]);

let projectFormRef = reactive(null);

let projectForm = reactive({
  id:null,
  name: null,
  school_id:null,
  course_id:null,

  startEndDate:null, 
  amount:null
});
  
let projectFormRule = reactive({
  name: [
    {
      required: true,
      trigger: 'blur'
    }
  ]
})
 

//加载课程列表
getCourseList().then(resp=>{
  courseList.length = 0;
  courseList.push(... resp.data);
})

//加载学校信息
getSchoolList().then(resp=>{
  schoolList.length = 0;
  schoolList.push(... resp.data);
})
 

if(route.query.projectId){
  //根据id查找
  findById(route.query.projectId).then((resp)=>{
    let project = resp.data;
    projectForm.id = project.id;
    projectForm.name = project.name;
    projectForm.schoolId = project.schoolId;
    projectForm.courseId = project.courseId;

    projectForm.startEndDate = [project.startDate,project.endDate]
 
    projectForm.amount = project.amount; 
  }).catch((error)=>{

  })
}
 
  

let handleSave = () => {
  //判断是否校验通过
  projectFormRef.validate((valid) => {
    if (valid) {
       
      let param = JSON.parse(JSON.stringify(projectForm));

      param.startDate = param.startEndDate[0];
      param.endDate = param.startEndDate[1];
      
      saveProject(projectForm.id,projectForm).then((resp) => {
        //提示并且返回列表
        router.push({path: '/project/list'});
      });
    }
  });
}
 
</script>

<style scoped>
.content {
  margin-top: 40px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
